<!--
 * @use: 
 * @description: 
 * @SpecialInstructions: 无
 * @Author: vision
 * @Date: 2023-06-16 11:25:31
 * @FilePath: /shared/modules/src/components/v-card/src/v-card.vue
-->
<template>
  <div class="v-card" :style="[{ width: state.width, height: state.height }, { ...state.style }]" v-size-change:10="resize">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
  import {
    //provide,
    reactive,
    //getCurrentInstance,
    //ComponentInternalInstance,
    onMounted,
    watch,
    nextTick,
  } from 'vue'

  //import {vSizeChange} from '@i-model/shared-directives'

  //const instance = <ComponentInternalInstance>getCurrentInstance()
  //const { proxy } = getCurrentInstance() as ComponentInternalInstance
  //const _this = instance?.proxy;
  defineOptions({ name: 'v-card' })

  interface Props {
    id: string
    width?: string
    height?: string
    style?: object
  }
  const props = withDefaults(defineProps<Props>(), {
    id: () => 'v-card',
  })

  const state = reactive({
    id: props.id,
    width: props.width,
    height: props.height,
    style: props.style,
    trigger: 0,
  })

  watch(
    () => props,
    () => {
      init()
    },
    { deep: true }
  )

  const init = function () {
    state.width = props.width
    state.height = props.height
    state.style = props.style
  }
  /*
const provideData = () =>{
  return {
    'resize': ()=>state.trigger,
  }
}
provide('provideData',provideData);
*/
  //广播事件
  const resize = function () {
    console.log('自定义指令:size-change')
    state.trigger++
    console.log(state.trigger)
  }

  onMounted(() => {
    //console.log(_this?.$attrs)
    nextTick(function () {
      init()
    })
  })
</script>
<style lang="scss" src="./v-card.scss" scoped></style>
